<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>项目规划</title>
		<link href="../css/layui.css" rel="stylesheet" type="text/css" />
		<script src="./../layui.js"></script>
	</head>
	<style>
		html,body{
			width:100%;
			height:100%;
			font-size: 62.5%;
		}
		.wrapBox{
			width: 100%;
			height:100%;
			box-shadow: 0px 0px 40px 0px rgba(89, 155, 255, 0.46) inset;
			border-radius: 10px;
		}
	
		/*内容 */
		/* content */
		.tab_box{
			width:100%;
			height:5rem;
			display: flex;
			flex-direction:row;
		}
		.tab_box>div{
			width: 18rem;
			height:3.5rem;
			line-height:3.5rem;		
            background: #194889;
			text-align: center;
            color: #84B0F9;
			cursor: pointer;
			font-size:1.5rem;
			
		}
		.tab_box>div:first-child{
			border-radius: 10px 0px 0px 0px;
		}
		.tab_box>div:last-child{	
            border-radius: 0px 10px 0px 0px;
		}
		
		.tab_box>div>span{
			vertical-align: middle;
			margin-left:0.5rem;
		}

		.tabActiveBg{
		    background:#0C52CA !important;
			color:#fff !important;
		}
		
		.xian_icon{
			width:2rem;
			height:2rem;
			display:inline-block;
			vertical-align:middle;
			background: url(../images/taskPlan/xianlu2.png);
			background-size: 100%  100%;
			background-repeat:no-repeat;
		}
		
		.she_icon{
			width:2rem;
			height:2rem;
			display:inline-block;
			vertical-align: middle;
			background: url(../images/taskPlan/shebei.png);
			background-size: 100%  100%;
			background-repeat:no-repeat;
		}
		
		.contBoxWrap{
			width:100%;
			height:93%;
			display: flex;
			flex-direction: row;
			padding: 0  2rem  2rem 2rem;
			box-sizing: border-box;
		}
		
		/* left */
		
		.contBoxLeft{
            width: 39%;
			height: 100%;
			display: flex;
			flex-direction: column;
			margin-right:1%;
			border-radius: 1rem;
			background: rgba(78, 129, 232, 0);
			box-shadow: 0px 0px 40px 0px rgba(89, 155, 255, 0.46);
		}
		
    	
		.headerBox{
			width: 100%;
			height:5rem;
			line-height:5rem;
			font-size: 1.8rem;
			color: #fff;
			background: #0350DB;
			text-align: center;
			border-radius: 10px 10px 0px 0px;
		}
		.headerIcon{
			width:3rem;
			height:3rem;
			display:inline-block;
			vertical-align: middle;
			background: url(../images/taskPlan/xianlu.png);
			background-size: 100%  100%;
			background-repeat:no-repeat;
		}
		.headerBox  span{
			vertical-align: middle;
			margin-left:0.5rem;
		}
		.header_banner{
			width: 100%;
			height:9rem;
			padding: 1.5rem 0;
			box-sizing: border-box;
			display:flex;
			flex-direction:row;
		}
		.header_banner>div{
			width: 25.4%;
			height:5rem;
			/* line-height:4.5rem; */
			font-family: Microsoft YaHei;
			color: #FFFFFF;
            border-radius: 10px;
			/* border: 1px  solid  red; */
	        margin-left:6%;
			display: flex;
			align-items: center;
		}
		.xl_box{	
            background: linear-gradient(0deg, #0336FF, #01B4FF);
			display: flex;
			flex-direction:row;
		}
		.cz_box{	
            background: linear-gradient(0deg, #5900BC, #9F4EFB);
			display: flex;
			flex-direction:row;
		}
		.yx_box{		
            background: linear-gradient(0deg, #00908E, #33FF99);
			display: flex;
			flex-direction:row;
		}
		.xl_boxLeft,
		.cz_boxLeft,
		.yx_boxLeft{
			width: 30%;
			text-align:right;
		}
		.xl_boxTxt,
		.cz_boxTxt,
		.yx_boxTxt{
			width: 70%;
			line-height:1.8rem;
			text-align:left;
			vertical-align: middle;
			padding-left: 0.5rem;
			box-sizing: border-box;
		}
		.xl_boxIcon{
			width:3rem;
			height:3rem;
			display:inline-block;
			vertical-align: middle;
			background: url(../images/taskPlan/timeIcon.png);
			background-size: 100%  100%;
			background-repeat:no-repeat;
		}
		
		.cz_boxIcon{
			width:3rem;
			height:3rem;
			display:inline-block;
			vertical-align: middle;
			background: url(../images/taskPlan/chezhuang.png);
			background-size: 100%  100%;
			background-repeat:no-repeat;
		}
		.yx_boxIcon{
			width:3rem;
			height:3rem;
			display:inline-block;
			vertical-align: middle;
			background: url(../images/taskPlan/yx_bgIcon.png);
			background-size: 100%  100%;
			background-repeat:no-repeat;
		}
		
		.xl_gl,.cz_dw,.yx_gl{
			width: 100%;
			display: inline-block;
			font-size: 1.5rem;
			/* background: red; */
		}
		.xl_gl>span,
		.cz_dw>span,
		.yx_gl>span{
			font-size:1rem;
		}
			
		.xl_lcs,
		.cz_num,
		.yx_lcs{
			width: 100%;
			display: inline-block;
			bfont-size:1rem;
		}
		
		.searchDiv{
			width:auto;
			padding: 0px 3rem;
			height:5.5rem;
			display:flex;
			flex-direction:row;
		}
		.searchDiv>div:first-child{
			width:92%;
		}
		.searchDiv>div:last-child{
			width: 8%;
			height: 3.8rem;
			background: #1749EC;
			border-radius: 0px 5px 5px 0px;
		}
		.searchDiv .layui-input, .layui-select, .layui-textarea {
		    border-radius: 10px 0 0 10px;
		}
	    
		.planItemSearchBtn{
		    width: 20px;
		    height: 20px;
		    background-image: url(../images/firstHeadToolSearchBtn.png);
		    background-size: 100% 100%;
		    border: 0;
		    border-width: 0px !important;
		    background-color: #fff0 !important;
		    margin-top: 0.8rem;
		    cursor: pointer;
		}
		.qw_box{
			width:100%;
			height: 80%;
			/* border: 1px  solid  red; */
			padding: 0  2rem  2rem  2rem;
			box-sizing:border-box;
		}
		.qw_wrapBox{
			width:100%;
			height:100%;
			background: #2053A1;
			border: 1px solid #5377ED;
			box-shadow: 0px 0px 10px 0px #0D44A9;
			border-radius: 10px;
		}
		.qw_title{
			width:100%;
			height:4rem;
			line-height:4rem;
			background: linear-gradient(90deg, #1153C1, #014FDF, #1153C1);
			border-radius: 10px 10px 0px 0px;
			text-align: center;
			color:#fff;
			font-size: 2rem;
			font-weight: bold;
		}
		.qw_image{
			width:3rem;
			height:3rem;
			display:inline-block;
			vertical-align: middle;
			background: url(../images/taskPlan/qudao.png);
			background-size: 100%  100%;
			background-repeat:no-repeat;
		}
		.qw_contBox{
			width: 100%;
			height:85%;
			overflow: auto;
		}
		#qwTree .layui-tree-txt {
		    color: #fff;
		}
		#qwTree .layui-tree-icon{
		    border:none;
			width:3rem;
			height:3rem;
			display:inline-block;
			vertical-align: middle;
			background: url(../images/taskPlan/gdImage.png);
			background-size: 100%  100%;
			background-repeat:no-repeat;	
		}
		#qwTree .layui-icon-file{
			width:2rem;
			height:2rem;
			display:inline-block;
			vertical-align: middle;
			background: url(../images/taskPlan/zdImage.png);
			background-size: 100%  100%;
			background-repeat:no-repeat;
		}
		#qwTree .layui-icon-addition:before{
			content:"";
		}
		#qwTree .layui-icon-file:before {
		    content: "";
		}
		#qwTree .layui-tree-line .layui-tree-set:before,
		.layui-tree-line .layui-tree-set .layui-tree-set:after{
			border-left:none;
			border-top:none;
		}
		
		
		
		/* right */
		.contBoxRight{
			width: 60%;
			height: 100%;
			border-radius: 1rem;
			background: rgba(78, 129, 232, 0);
			box-shadow: 0px 0px 40px 0px rgba(89, 155, 255, 0.46);
		}
		.sb_title{
			width:100%;
			height:5rem;
			line-height:5rem;
			font-size: 2rem;
			color:#fff;
			background: #0350DB;
			border-radius: 10px 10px 0px 0px;
			text-align:center;
		}
		.sb_image{
			width:3rem;
			height:3rem;
			display:inline-block;
			vertical-align: middle;
			background: url(../images/taskPlan/sbImage.png);
			background-size: 100%  100%;
			background-repeat:no-repeat;
		}
		.sb_txt{
			vertical-align: middle;
		}
		
		.sp_wrapCont{
			width:100%;
			height:95%;
		}
		
		.sb_titBox{
			width: 100%;
			height:6rem;
			line-height:6rem;
	        margin-left: 2rem;
		}
		.sp_titBoxTxt{
			width:80%;
			height:3.5rem;
			line-height: 3.5rem;
			display:inline-block;
			vertical-align: middle;
			background: url(../images/taskPlan/bgimage.png);
			background-size: 100%  100%;
			background-repeat:no-repeat;	
		}
		.sp_titBoxTxt i{
			width:2.5rem;
			height:2.5rem;
			display:inline-block;
			vertical-align: middle;
			background: url(../images/taskPlan/sbIcon.png);
			background-size: 100%  100%;
			background-repeat:no-repeat;	
			margin-left: 2rem;
		}
		.sp_qbTxt{
			color: #fff;
			font-size:1.5rem;
			vertical-align: middle;
		}
		.btnBoxDiv{
			width: 100%;
			height: 3rem;
			line-height: 3rem;
			
		}
		.btnWrap{
			width:32rem;
			height: 100%;
			display: flex;
			flex-direction:row;
			margin: 0  auto;
			
		}
		.btnWrap>span{
			width: 8rem;
			height: 100%;
			display: inline-block;
			background: rgba(73, 133, 251, 0);
			border: 1px solid #5377ED;
			box-shadow: 0px 0px 10px 0px #0D44A9;
			text-align: center;
			color: #fff;
			cursor: pointer;
			font-size: 1.4rem;
			font-weight: bold;
		}
		.btnWrap>span:first-child{
			border-radius:1rem 0 0 1rem;
		}
		.btnWrap>span:last-child{
			border-radius:0rem 1rem 1rem 0rem;
		}
		.act_bgColor{	
            background:linear-gradient(0deg, #0336FF, #01B4FF) !important;
		}
		#echartBox{
			width:100%;
			height:82%;
		}
		.layui-input, .layui-select, .layui-textarea {
		    background-color:#0E3978;
		    border-color: #337AFC;
        }
		input::-webkit-input-placeholder {
		    color: #fff;
		  }
		  input::-moz-input-placeholder {
			color: #fff;
		  }
		  input::-ms-input-placeholder {
			color: #fff;
		  }
		  
	</style>
	<body>
		<div class="wrapBox">
			<div  class="tab_box">
				<div class="tabActiveBg">
					<i class="xian_icon"></i>
					<span>线路位置</span>
				</div>
				<div>
					<i class="she_icon"></i>
					<span>设备结构</span>
				</div>
			</div>
			<div class="contBoxWrap">
				<div class="contBoxLeft">
					<div  class="headerBox">
						<i class="headerIcon"></i>
						<span>线路位置情况</span>
					</div>
					<div class="header_banner">
						 <div class="xl_box">
							 <div class="xl_boxLeft"><i class="xl_boxIcon"></i></div>
							 <div class="xl_boxTxt">
								 <div class="xl_gl">705<span>公里</span></div>
								 <div class="xl_lcs">线路里程数</div>
							 </div>
						 </div>
						 <div class="cz_box">
							 <div class="cz_boxLeft"><i class="cz_boxIcon"></i></div>
							 <div class="cz_boxTxt">
								 <div class="cz_dw">350<span>座</span></div>
								 <div cass="cz_num">车站数</div>
							 </div>
						 </div>
						 <div class="yx_box">
							 <div class="yx_boxLeft"><i class="yx_boxIcon"></i></div>
							 <div class="yx_boxTxt">
								 <div class="yx_gl">60401<span>公里</span></div>
								 <div class="yx_lcs">运行里程数</div>
							 </div>
						 </div>
					</div>
					<div class="searchDiv">
						<div><input  type="text"  class="layui-input" value=""  data-idx=""  autocomplete="off"  placeholder="搜索车站或线路名"  /></div>
						<div class = "planItemSearch" align="center">
							<button  type="button" id = "proSearchBtn" class="planItemSearchBtn" ></button>
						</div>
					</div>
					<div class="qw_box">
						<div class="qw_wrapBox">
							<div class="qw_title">
								<i class="qw_image"></i>
								<span>全网</span>
							</div>
							<div class="qw_contBox">
								<div id="qwTree" class="demo-tree demo-tree-box"></div>
							</div>
						</div>
					</div>
					
				</div>
				<div class="contBoxRight">
					<div class="sb_title">
						<i class="sb_image"></i>
						<span class="sb_txt">设备更新情况</span>
					</div>
					<div class="sp_wrapCont">
						<div class="sb_titBox">
							<div class="sp_titBoxTxt">
								<i></i>
								<span class="sp_qbTxt">设备更新占比数-全部设备</span>
							</div>
						</div>
						<div class="btnBoxDiv">
							<div class="btnWrap">
								<span class="act_bgColor">全部</span>
								<span>欠修</span>
								<span>大修中</span>
								<span>已大修</span>
							</div>
						</div>
						
						<div id="echartBox">
							
						</div>
					</div>
				</div>
			</div>
		    
		</div>
	</body>
	<script src="./../layui.js"></script>
	<script src="./../echarts/echarts.min.js"></script>
	<script src="./../index.js"></script>
	<script>
		
		console.log(layui)
	    layui.config({
	        base: ''
	    });
	    layui.use(['layer','form','element','laydate','tree'], function () {//,'element'
	        var layer = layui.layer
	            , element = layui.element
	            ,form = layui.form
	            , $ = layui.$
	            ,laydate = layui.laydate
				,tree = layui.tree
				
				  //日期
				  laydate.render({
				    elem: '#monthData'
				  });
				  
				$(".tab_box>div").on("click",function(){
					 $(this).addClass("tabActiveBg").siblings().removeClass('tabActiveBg');
				}) 
				 
			   //模拟数据1
			    var data1 = [{
					  title: '轨道交通1号线'
					  ,id: 1
					  ,children: [{
						title: '徐泾东站'
						,id: 1000
					  },{
						title: '虹桥火车站'
						,id: 1001
					  },{
						title: '虹桥2号航站楼'
						,id: 1002
					  },{
						title: '威宁路站'
						,id: 1003
					  },{
						title: '娄山关路站'
						,id: 1004
					  },{
						title: '人民广场站'
						,id: 1005
					  },{
						title: '南京西路站'
						,id: 1006
					  }]	
					},{
					  title: '轨道交通2号线'
					  ,id: 2
					 ,children: [{
							title: '徐泾东站'
							,id: 1000
						},{
							title: '虹桥火车站'
							,id: 1001
						},{
							title: '虹桥2号航站楼'
							,id: 1002
						},{
							title: '威宁路站'
							,id: 1003
						},{
							title: '娄山关路站'
							,id: 1004
						},{
							title: '人民广场站'
							,id: 1005
						},{
							title: '南京西路站'
							,id: 1006
						}]
					},{
					  title: '轨道交通3号线'
					  ,id: 3
					  ,children: [{}]  
					}] 
				 
			  //常规用法
			   tree.render({
				  elem: '#qwTree', //默认是点击节点可进行收缩
				  data: data1
			   });
			   
			   $(".btnWrap>span").on("click",function(){
				    $(this).addClass("act_bgColor").siblings().removeClass('act_bgColor');
			   })
			   
			   
		var   dataX = ['土建设施', '线路', '车辆', '车辆', '车辆', '车辆', '通风、空调 与供暖设备'];
			  
		var	 option = {
			     tooltip: {
			         trigger: 'axis',
			         axisPointer: {            // 坐标轴指示器，坐标轴触发有效
			             type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			         }
			     },
			      legend:[{
			             itemWidth:12,
			             itemHeight:12,
			             top:'3%', //调整位置
			             left:'30%' ,//调整位置
			             textStyle: {color: '#fff',fontSize:'16'},
			             data:[{name:'已大修',icon:'roundRect'}],   //rect为矩形
			         },{
			             itemWidth:12,
			             itemHeight:12,
			             top:'3%', //调整位置
			             left:'46%' ,//调整位置
			             textStyle: {color: '#fff',fontSize:'16'},
			             data:[{name:'大修中',icon:'roundRect'}],   //rect为矩形
			         },{
			             itemWidth:12,
			             itemHeight:12,
			             top:'3%', //调整位置
			             right:'30%' ,//调整位置
			             textStyle: {color: '#fff',fontSize:'16'},
			             data:[{name:'欠修',icon:'roundRect'}]   //rect为矩形
			         }],
			        toolbox: {
			             show: true,
			             orient: 'vertical',
			             left: 'right',
			             top: 'center',
			             feature: {
			                 mark: {show: true},
			                 dataView: {show: true, readOnly: false},
			                 magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
			                 restore: {show: true},
			                 saveAsImage: {show: true}
			             }
			         },    
			     grid: {
			         left: '3%',
			         right: '3%',
			         bottom: '3%',
			         containLabel: true
			     },
				 xAxis:[{
				     type: 'category',
				     axisTick: {show: false},
				     data:dataX,
				     axisLabel:{  
				 	     interval: 0,  
						 show: true,
						 textStyle: {
						     color: '#fff',
						     fontSize:'12'
						 },
				 		 formatter:function(value){
							// return value.split("").join("\n");  
				 		   var res = value;
				 			  if(res.length > 3) {
								  
				 				  res = res.substring(0, 2) + "..";
				 			  }
							return  res;  
	
				 		 }
				      },  
				     axisLine:{
				         lineStyle:{
				             color:"#6076AD",
				             width:1,
				         }
				     }
				 }],
			     yAxis:[{
			            type: 'value',
			            splitLine: {
			                show: true,
			                lineStyle:{
			                    color: '#244B8B',
			                    width: 1,
			                    type: 'solid'
			                }
			            },
			            axisLine:{
			                show:false,
			                lineStyle:{
			                    color:"#6076AD",
			                    width:1
			                }
			            },
			            axisLabel: {
			                show: true,
			                textStyle: {
			                    color: '#fff',
			                    fontSize:'12'
			                }
			            }
			     }],
			     series: [
			         {
			             name: '已大修',
			             type: 'bar',
			             stack: '总量',
			               barWidth: 20,
			             label: {
			                 show: false,
			                 position: 'insideRight'
			             },
			               itemStyle: {
			                     normal: {
			                         color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
			                             offset: 0,
			                             color: "#0336FF" // 0% 处的颜色
			                         }, {
			                             offset: 0.9,
			                             color: "#01B4FF" // 100% 处的颜色
			                         }], false)
			                     }
			                 },
			             data: [30, 30, 30, 30, 30, 30, 30]
			         },
			         {
			             name: '大修中',
			             type: 'bar',
			             stack: '总量',
			               barWidth: 20,
			             label: {
			                 show: false,
			                 position: 'insideRight'
			             },
			             itemStyle: {
			                     normal: {
			                         color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
			                             offset: 0,
			                             color: "#FFAE00" // 0% 处的颜色
			                         }, {
			                             offset: 0.9,
			                             color: "#E1E40D" // 100% 处的颜色
			                         }], false)
			                     }
			                 },
			             data: [50, 50, 50, 50, 50, 50, 50]
			         },
			         {
			             name: '欠修',
			             type: 'bar',
			             stack: '总量',
			               barWidth: 20,
			             label: {
			                 show: false,
			                 position: 'insideRight'
			             },
			               itemStyle: {
			                     normal: {
			                         color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
			                             offset: 0,
			                             color: "#EC263C" // 0% 处的颜色
			                         }, {
			                             offset: 0.9,
			                             color: "#E15D8B" // 100% 处的颜色
			                         }], false)
			                     }
			                 },
			             data: [20, 20, 20, 20, 20, 20, 20]
			         }
			     ]
			 }; 
			   
			var myChart = echarts.init(document.getElementById("echartBox"));
			myChart.setOption(option);	     
				
	    });
	</script>
</html>
